<template>
	<view class="record">
		<view class="tit">考勤记录查询</view>
		<view class="dateSelect">
			<picker mode="date" :value="startTime" @change="changeTime($event, 'startTime')">
				<view>
					<text>开始时间</text>
					<text v-text="startTime"></text>
					<icon class="iconfont iconarrow-right-copy-copy"></icon>
				</view>
			</picker>
			<picker mode="date" :value="endTime" @change="changeTime">
				<view>
					<text>结束时间</text>
					<text v-text="endTime"></text>
					<icon class="iconfont iconarrow-right-copy-copy"></icon>
				</view>
			</picker>
		</view>
		<view class="list">
			<view class="listInfo" v-for="(item, index) in list" :key="index">
				<view class="miniTit">{{ item.attendanceDate | date }} 星期{{ item.weekDayIndexName }}</view>
				<view class="flexBox">
					<view class="clockInfo">
						<view>
							<icon class="iconfont iconziyuan"></icon>
							打卡时间：{{ item.attendanceDate | time }}
						</view>
						<view>
							<icon class="iconfont iconziyuan1"></icon>
							打卡位置：{{ item.signLocation }}
						</view>
					</view>
					<image class="plusCamera" v-show="item.attachments" :src="item.attachments[0].docFileUrl" mode="aspectFit" @click="previewImg(index)"></image>
				</view>
				<text v-if="list.length == 0">无打卡记录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { format } from '@/libs/common.js';
import photoMixins from '@/libs/photoMixins.js';
export default {
	mixins: [photoMixins],
	data() {
		return {
			startTime: '',
			endTime: '',
			list: ''
		};
	},
	onLoad() {
		this.startTime = this.endTime = format('YY-mm-dd', new Date());
		this.getRecord();
	},
	methods: {
		getRecord() {
			this.$http
				.post({
					url: '/stu/studentAttendance/list',
					data: {
						attendanceStartDate: this.startTime,
						attendanceEndDate: this.endTime
					}
				})
				.then(e => {
					this.list = e.result.records;
				});
		},
		changeTime(e, target) {
			if (target == 'startTime') {
				this.startTime = e.detail.value;
				this.getRecord();
			} else {
				this.endTime = e.detail.value;
				this.getRecord();
			}
		},
	},
	filters: {
		date(value) {
			if (!value) return '';
			let arr = value.split(' ');
			return arr[0];
		},
		time(value) {
			if (!value) return '';
			let arr = value.split(' ');
			return arr[1];
		}
	}
};
</script>

<style lang="scss" scoped>
.flexBox {
	display: flex;
	max-height: 240upx;
	align-items: center;
	.clockInfo {
		flex: 0 1 70%;
	}
	image {
		flex: 0 1 30%;
	}
}
.record {
	padding: 45upx;

	.dateSelect {
		view {
			width: 100%;
			border-bottom: 1upx solid #ccc;
			height: 110upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				font-size: 34upx;
				&:nth-of-type(2) {
					color: #999;
					margin-left: auto;
				}
			}

			icon {
				margin-left: auto;
			}
		}
	}
}

.tit {
	font-size: 36upx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.miniTit {
	font-size: 32upx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.list {
	.listInfo {
		padding: 40upx 0;
		border-bottom: 1upx solid #cccccc;

		view {
			line-height: 60upx;
		}

		text {
			display: block;
			width: 100%;
			text-align: center;
		}
	}
}
</style>
